<template>
  <div class="table-list">
    <header class="table-list-header">
      <TitleText :title="`${titlePrefix}${currParent.mc ? ` - ${currParent.mc}` : ''}`" />
      <el-button v-if="currParent.bh == 'icon'" type="primary" plain :icon="Plus" @click="onAdd">新增</el-button>
    </header>
    <el-form class="table-list-search" :model="tableSearch" label-suffix=": ">
      <el-form-item label="编号" prop="bh">
        <el-input v-model="tableSearch.fzmc" clearable placeholder="请输入编号" />
      </el-form-item>
      <el-form-item label="名称" prop="mc">
        <el-input v-model="tableSearch.xfdw" clearable placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="状态" prop="zt">
        <el-select v-model="tableSearch.zt" clearable placeholder="请选择状态">
          <el-option v-for="item, index in SECURITY_STATUS_OPTIONS" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <section class="table-list-table">
      <el-table :data="tableData">
        <template #empty>
          <Empty tableEmpty />
        </template>
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="bh" label="编号" min-width="150" />
        <el-table-column prop="mc" label="名称" min-width="100" />
        <el-table-column prop="zt" label="任务状态" min-width="100">
          <template #default="{ row }">
            <el-tag v-if="row.zt == SECURITY_STATUS['启用']" type="primary">启用</el-tag>
            <el-tag v-else-if="row.zt == SECURITY_STATUS['禁用']" type="danger">禁用</el-tag>
            <el-tag v-else type="danger">状态异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="currParent.mc == '点标记'" prop="icon" label="图标" min-width="100">
          <template #default="{ row, $index }">
            <el-image style="height: 38px;" :src="tableIconList[$index]" :preview-src-list="tableIconList" show-progress
              :initial-index="$index" fit="cover" preview-teleported/>
          </template>
        </el-table-column>
        <el-table-column prop="cjsj" label="创建时间" min-width="160" />
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="{ row }">
            <el-button link type="primary" @click="onEdit(row)">编辑</el-button>
            <el-popconfirm title="确认删除吗？" @confirm="onDelete(row)">
              <template #reference>
                <el-button link type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="table-list-table-pagination"
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        background
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </section>
    <TableFormDialog ref="tableFormDialogRef" :name="currParent.mc" @submited="onSearch" />
  </div>
</template>

<script setup>
import { ref, reactive, computed, useTemplateRef } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { markApi } from '@/api/systemSetting'
import { SECURITY_STATUS, SECURITY_STATUS_OPTIONS } from '@/views/SystemSetting/config'
import TableFormDialog from './TableFormDialog.vue'

const props = defineProps({
  titlePrefix: {
    type: String,
    required: true,
  },
})

const tableFormDialogRef = useTemplateRef('tableFormDialogRef')
const currParent = reactive({});
const tableSearch = reactive({});
const tableData = reactive([]);
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const tableIconList = computed(() => {
  return tableData.map(item => {
    if (!item.icon) return;
    const iconPath = new URL(`/src/assets/images/${item.icon}`, import.meta.url).href;
    console.log('iconPath', iconPath);
    return iconPath
  }).filter(Boolean)
})

const onAdd = () => {
  tableFormDialogRef.value.show('add');
}

const onEdit = row => {
  tableFormDialogRef.value.show('edit', row);
}

const onDelete = row => {
  
}

const getData = item => {
  Object.assign(currParent, item);
  onSearch();
}

const onSearch = () => {
  pagination.currentPage = 1;
  getList();
}

const onReset = () => {
  Object.assign(tableSearch, {})
  onSearch();
}

const getList = async () => {
  console.log('getTableList');
  try {
    const res = await markApi.tableList({});
    Object.assign(tableData, res.data.records);
    pagination.total = res.data.total;
  } catch (error) {
    console.error(error);
  }
}

const onSizeChange = value => {
  pagination.currentPage = 1;
  pagination.pageSize = value;
  getList();
}

const onCurrentChange = value => {
  pagination.currentPage = value;
  getList();
}

defineExpose({ getData })
</script>

<style lang="scss" scoped>
@use '@/styles/components/tablePage.scss';
</style>